<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="text1">伪元素可以在元素的内容之后插入新内容</p>
		<p id="text2">伪元素可以在元素的内容之后插入新内容</p>

	</body>
</html>
<style type="text/css">
	/* 第一个字母 */
	#text1::first-letter{
		font-size: 40px;
	}
	/* 第一行 */
	#text2::first-line{
		font-size: 40px;
	}
	/* 选中的内容 */
	p::selection{
		background-color: #7FFFD4;
	}
	/* 在元素之前插入内容 */
	#text1::before{
		content: "开始";
		color: #0000FF;
	}
	/* 在元素之后插入内容 */
	#text1::after{
		content: "结束";
		color: #0000FF;
	}
</style>